<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面加载</title>
</head>
<body>

<script>
    /*

        分析发现:  获取标签的JS代码位于标签的上面,则获取不到标签对象了
        原因: 浏览器解析HTML文档, 从上而下解析的.
        方案: 等待整个HTML文档都加载成功以后,再获取标签即可
     */

    // function fun() {
    //     var btn1 = document.getElementById("btn1");
    //     alert(btn1);
    // }

    onload = function () {
        var btn1 = document.getElementById("btn1");
        alert(btn1);
    }

</script>

<!--<button id="btn1" onclick="fun()">按钮</button>-->
<button id="btn1" >按钮</button>
</body>
</html>